export default {
    name: 'SimpleNoticeBar',
    props: {
        text: {
            type: String,
            default: ''
        },
        speed: {  // 滚动速度（像素/秒）
            type: Number,
            default: 50  
        },
        showIcon: {
            type: Boolean,
            default: true
        },
        bgColor: {
            type: String,
            default: '#fffbe8'
        },
        color: {
            type: String,
            default: '#ed6a0c'
        }
    },
    setup(props) {
        const contentRef = ref(null)
        const containerRef = ref(null)
        let animationFrameId = null
        
        const startAnimation = () => {
            if (!contentRef.value || !containerRef.value) return
            
            // 计算必要参数
            const contentWidth = contentRef.value.scrollWidth
            const containerWidth = containerRef.value.offsetWidth

            // 确保文本宽度大于容器宽度才开始滚动
            if (contentWidth <= containerWidth) return

            // 计算每帧的移动距离
            const speed = props.speed
            const distancePerFrame = speed / 60 // 每帧的距离 (60帧每秒)

            // 定义滚动动画函数
            const animate = () => {
                const currentTranslateX = parseFloat(contentRef.value.style.transform.replace('translateX(', '').replace('px)', '')) || 0
                const newTranslateX = currentTranslateX - distancePerFrame
                contentRef.value.style.transform = `translateX(${newTranslateX}px)`

                // 如果文本完全滚动完，再重置位置
                if (newTranslateX <= -contentWidth) {
                    contentRef.value.style.transform = `translateX(${containerWidth}px)`
                }

                animationFrameId = requestAnimationFrame(animate)
            }

            // 开始动画
            cancelAnimationFrame(animationFrameId) // 清除任何现有的动画帧
            animationFrameId = requestAnimationFrame(animate)
        }

        // 响应式更新
        watch(() => props.text, () => {
            nextTick(startAnimation)
        })

        onMounted(() => {
            nextTick(() => {
                startAnimation()
                window.addEventListener('resize', startAnimation)
            })
        })

        onBeforeUnmount(() => {
            cancelAnimationFrame(animationFrameId) // 清除动画
            window.removeEventListener('resize', startAnimation)
        })

        return {
            contentRef,
            containerRef
        }
    },
    template: `
        <div v-if="text" :style="{display: 'flex', alignItems: 'center', padding: '8px 16px', backgroundColor: bgColor, color: color, overflow: 'hidden', position: 'relative', width: '100%'}" ref="containerRef">
            <!-- 左侧图标 -->
            <el-icon v-if="showIcon" :style="{ marginRight: '8px', flexShrink: 0 }">
                <MuteNotification />
            </el-icon>

            <!-- 滚动容器 -->
            <div :style="{flex: 1, overflow: 'hidden', whiteSpace: 'nowrap', minHeight: '1em'}">
                <!-- 滚动内容 -->
                <div ref="contentRef" :style="{display: 'inline-block', paddingLeft: '100%', whiteSpace: 'nowrap', minWidth: '200%', transition: 'transform 0.1s linear'}">
                    {{ text }}
                </div>
            </div>
        </div>
    `
}
